<!DOCTYPE html>
<html lang="zh-cn" class="act">
<head>
<title>智慧幼儿园-中上</title>
<meta charset=utf-8>
<meta name="keywords" content="智慧幼儿园">
<meta name="description" content="智慧幼儿园">
<meta name="author" content="本站由杭州翰臣科技有限公司进行全程策划/页面设计/程序开发完成.24小时技术支持——翰臣科技：http://www.68team.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mulu10.css">
</head>
<body ontouchstart>

	<!-- 最外侧框架 -->
	<div class="iall">
		<!-- 背景图 定义页面宽高 -->
		<img src="images/in_1.jpg" alt="智慧幼儿园">


		<!-- 目录版块 -->
		<div class="mulu dwcj">
			<img src="images/mulu/mulu_1.jpg" alt="智慧幼儿园">
			<img src="images/mulu/mu_1bg.png" class="c" alt="智慧幼儿园">
			
			<!-- 鸟 -->
			<ul class="niao">
				<li class="li1"> 
					<img src="images/mulu/niao_1_1.png" alt="智慧幼儿园">
				</li>
				<li class="li2"> 
					<img src="images/mulu/niao_2_1.png" alt="智慧幼儿园">
				</li>
			</ul>
			<!-- 目录背景 -->
			<div class="imgbg c">
				<img src="images/mulu/bg_1_3.png" alt="智慧幼儿园">
			</div>

			<!-- 目录文字 -->
			<ul class="wenzi">
				<li class="li1" data-bt="images/mulu/bt_10_01.png">
					<img src="images/mulu/mu_10_1.png" alt="智慧幼儿园">
				</li>
				<li class="li2" data-bt="images/mulu/bt_10_02.png">
					<img src="images/mulu/mu_10_2.png" alt="智慧幼儿园">
				</li>
				<li class="li3" data-bt="images/mulu/bt_10_03.png">
					<img src="images/mulu/mu_10_3.png" alt="智慧幼儿园">
				</li>
				<li class="li4" data-bt="images/mulu/bt_10_04.png">
					<img src="images/mulu/mu_10_4.png" alt="智慧幼儿园">
				</li>
			</ul>

			<!-- 标题 -->

			<div class="biaoti">
				<img src="images/mulu/bt_10.png" alt="智慧幼儿园">
			</div>

			<!-- 返回 -->
			<div class="fh unfh" id="ace">
				<div class="anniu ">
					<img  src="images/zhuti/mp3bg.png" alt="智慧幼儿园">
					<img  src="images/zhuti/fh.png" class="th" alt="智慧幼儿园">
				</div>
			</div>




		</div>



		<!-- 目录详情版块 -->
		<div class="muxq dwcj">
			<img src="images/muluxq/mulu_1.jpg" alt="智慧幼儿园">

			<div class="muxqbox">
				<img src="images/muluxq/mulu_2.jpg" alt="智慧幼儿园">
				<!-- 标题文字 -->
				<img src="" class="biaotiwenzi" alt="智慧幼儿园">
				<dl class="muxqdl">
					<dd class="dd1">
						<img src="images/muluxq/mulu_10_1.jpg" alt="智慧幼儿园">
						
						<ul class="ul1 alltime">
							<li class="li1">
								<img src="images/muluxq/mu_10_1.png" alt="智慧幼儿园">
							</li>
							<li class="li2">
								<img src="images/muluxq/mu_10_2.png" alt="智慧幼儿园">
							</li>
							<li class="li3">
								<img src="images/muluxq/mu_10_3.png" alt="智慧幼儿园">
							</li>
							<li class="li4">
								<img src="images/muluxq/mu_10_4.png" alt="智慧幼儿园">
							</li>
							<li class="li5">
								<img src="images/muluxq/mu_10_5.png" alt="智慧幼儿园">
							</li>
						</ul>
						
					</dd>
					<dd class="dd2">
						<img src="images/muluxq/mulu_10_2.jpg" alt="智慧幼儿园">
						<div class="cfx ">
							<img src="images/muluxq/mu_10_6.png" alt="智慧幼儿园">
							<img class="alltime" src="images/muluxq/mu_10_7.png" alt="智慧幼儿园">
							<img class="alltime" src="images/muluxq/mu_10_8.png" alt="智慧幼儿园">
						</div>
						<ul class="ul1">
							<li class="li1">
								<img src="images/muluxq/mu_10_10.png" alt="智慧幼儿园">
							</li>
							<li class="li2">
								<img src="images/muluxq/mu_10_9.png" alt="智慧幼儿园">
							</li>
						</ul>

					</dd>
					<dd class="dd3">
						<img src="images/muluxq/mulu_10_3.jpg" alt="智慧幼儿园">
						<div class="cfx ">
							<img  src="images/muluxq/mu_10_11.png" alt="智慧幼儿园">
							<img  src="images/muluxq/mu_10_12.png" alt="智慧幼儿园">
						</div>
						<ul class="ul1">
							<li class="li1">
								<img src="images/muluxq/mu_10_13.png" alt="智慧幼儿园">
							</li>
							<li class="li2">
								<img src="images/muluxq/mu_10_14.png" alt="智慧幼儿园">
							</li>
						</ul>
					</dd>
					<dd class="dd4">
						<img src="images/muluxq/mulu_10_4.jpg" alt="智慧幼儿园">
						<ul class="ul1 alltime">
							<li class="li1">
								<img src="images/muluxq/mu_10_15.png" alt="智慧幼儿园">
							</li>
							<li class="li2">
								<img src="images/muluxq/mu_10_16.png" alt="智慧幼儿园">
							</li>
							<li class="li3">
								<img src="images/muluxq/mu_10_17.png" alt="智慧幼儿园">
							</li>
							<li class="li4">
								<img src="images/muluxq/mu_10_18.png" alt="智慧幼儿园">
							</li>
							<li class="li5">
								<img src="images/muluxq/mu_10_19.png" alt="智慧幼儿园">
							</li>
							<li class="li6">
								<img src="images/muluxq/mu_10_20.png" alt="智慧幼儿园">
							</li>
							<li class="li7">
								<img src="images/muluxq/mu_10_21.png" alt="智慧幼儿园">
							</li>
							<li class="li8">
								<img src="images/muluxq/mu_10_22.png" alt="智慧幼儿园">
							</li>
							<li class="li9">
								<img src="images/muluxq/mu_10_23.png" alt="智慧幼儿园">
							</li>
							<li class="li10">
								<img src="images/muluxq/mu_10_24.png" alt="智慧幼儿园">
							</li>
							<li class="li11">
								<img src="images/muluxq/mu_10_25.png" alt="智慧幼儿园">
							</li>
						</ul>
					</dd>
					
				</dl>
			</div>	
			

			<!-- 返回 -->
			<div class="fh xqfh">
				<div class="anniu ">
					<img  src="images/zhuti/mp3bg.png" alt="智慧幼儿园">
					<img  src="images/zhuti/fh.png" class="th" alt="智慧幼儿园">
				</div>
			</div>
		</div>














	</div>




	<script type='text/javascript' src='js/jquery-3.5.1.min.js'></script>

	<script type="text/javascript">


		$(function(){
			// 鸟图片替换
			function yazi1() {
				var fish = 1
				var fishTotal = 2

				setInterval(function() {
					fish++
					if (fish > fishTotal) fish = 1
					$('.mulu .niao .li1 img').attr('src', 'images/mulu/niao_1_' + fish + '.png');
					
				}, 200)
				setInterval(function() {
					fish++
					if (fish > fishTotal) fish = 1
					$('.mulu .niao .li2 img').attr('src', 'images/mulu/niao_2_' + fish + '.png');
					
				}, 300)
			}
			yazi1();



			// 目录关闭父页面iframe 弹窗
			var ace = document.getElementById('ace');
			ace.addEventListener('click',function(){
				var fun="click";
				window.parent.postMessage(fun,'*');
			})



			// 点击显示详情
			$('.mulu .wenzi li').on('click',function(){
				var idx=$(this).index();
				$('.iall .muxq ').show();
				$('.muxq .muxqdl dd').eq(idx).show().siblings().hide();
				// 框架标题文字
				var biaotiwenzi=$(this).attr('data-bt');
				if(biaotiwenzi!=''){
					$('.muxq .biaotiwenzi').show().attr({'src':biaotiwenzi});
				}else{
					$('.muxq .biaotiwenzi').hide();
				}
				// 显示对应版块
				if(idx==1){
					setTimeout(function () {$('.muxq .muxqdl .dd2 .cfx').stop(true,false).addClass('act');  }, 100);
				}

			})




			// 图形显示
			$('.muxq .muxqdl .dd2 .ul1 li').on('click',function(){
				var idx=$(this).index();
				if(idx==0){
					$('.muxq .muxqdl .dd2 .cfx').stop(true,false).addClass('act2').stop(true,false).removeClass('act3');
				}
				if(idx==1){
					$('.muxq .muxqdl .dd2 .cfx').stop(true,false).addClass('act3').stop(true,false).removeClass('act2');
				}
			})


			$('.muxq .muxqdl .dd3 .ul1 li').on('click',function(){
				var idx=$(this).index();
				if(idx==0){
					$('.muxq .muxqdl .dd3 .cfx').stop(true,false).addClass('act1').stop(true,false).removeClass('act2');
				}
				if(idx==1){
					$('.muxq .muxqdl .dd3 .cfx').stop(true,false).addClass('act2').stop(true,false).removeClass('act1');
				}
			})



			// 图片显示
			$('.muxq .muxqdl .dd1 .ul1 li').on('click',function(){
				$(this).stop(true,false).addClass('act');
			})
			
			$('.muxq .muxqdl .dd4 .ul1 li').on('click',function(){
				$(this).stop(true,false).addClass('act');
			})



			

			// 详情关闭弹窗
			$('body').on('click','.iall .muxq  .fh',function(){
				$('.muxq .muxqdl .dd1 .ul1 li').removeClass('act');
				$('.muxq .muxqdl .dd2 .cfx').removeClass('act act2 act3'); 
				$('.muxq .muxqdl .dd3 .cfx').removeClass('act2 act1'); 
				$('.muxq .muxqdl .dd4 .ul1 li').removeClass('act');
				$('.iall .muxq ').hide();

			})












		})

		

	</script>
</body>

</html>